<template>
	<view class="">
		<view class="flex" style="padding: 20rpx 34rpx;border-bottom: 2rpx solid #F4F5F9;">
			<view class="" style="font-size: 0;margin-right: 20rpx;">
				<image style="width: 84rpx;height: 84rpx;border-radius: 50%;" :src="item.avatar" mode=""></image>
			</view>
			<view class="flex flex-clum justify-between" style="height: 84rpx;">
				<view class="" style="font-size: 30rpx;font-weight: 700;color: #333333;">
					{{item.username}}
				</view>
				<view class="" style="font-size: 26rpx;color: #999999;">
					{{item.mobile}}
				</view>
			</view>
		</view>
		<view class="">
			<view class="flex align-center justify-between" style="padding: 22rpx 32rpx;">
				<view class="" style="font-size: 26rpx;font-weight: 700;color: #333333;">
					员工姓名
				</view>
				<input type="text" v-model="name" style="text-align: right;" placeholder="请输入员工姓名">
			</view>
			<view class="flex align-center justify-between" style="padding: 22rpx 32rpx;">
				<view class="" style="font-size: 26rpx;font-weight: 700;color: #333333;">
					选择身份
				</view>
				<view class="flex align-center" style="">
					<view class="" @click="changeIden(0)"
						style="padding: 4rpx 10rpx;border-radius: 8rpx;font-size: 24rpx;color: #666666;"
						:style="iden==0?'border: 2rpx solid #C38D4B;color: #C38D4B;':''">
						商家管理
					</view>
					<view class="" @click="changeIden(1)"
						style="padding: 4rpx 10rpx;border-radius: 8rpx;font-size: 24rpx;color: #666666;margin-left: 20rpx;"
						:style="iden==1?'border: 2rpx solid #C38D4B;color: #C38D4B;':''">
						商家职员
					</view>
				</view>
			</view>
			<view v-if="iden==1" class="flex align-center justify-between" style="padding: 22rpx 32rpx;">
				<view class="" style="font-size: 26rpx;font-weight: 700;color: #333333;">
					员工职位
				</view>
				<input type="text" v-model="job" style="text-align: right;" placeholder="职位录入">
			</view>
			<view class="flex align-center justify-between" style="padding: 22rpx 32rpx;">
				<view class="" style="font-size: 26rpx;font-weight: 700;color: #333333;">
					所属店铺
				</view>
				<view class="" style="font-size: 24rpx;color: #333333;font-weight: 700;">
					{{userList.shop.shopname}}（{{userList.shop.on_num}}/{{userList.shop.worker_num}}）
				</view>
			</view>
			<view class="flex align-center justify-between" style="padding: 22rpx 32rpx;">
				<view class="" style="font-size: 26rpx;font-weight: 700;color: #333333;">
					在线管理
				</view>
				<view class="" v-if="iden==1" style="font-size: 0;" @click="management=!management">
					<image v-if="management" style="width: 68rpx;height: 40rpx;" src="./static/18.png" mode=""></image>
					<image v-else style="width: 68rpx;height: 40rpx;" src="./static/19.png" mode=""></image>
				</view>
				<view class="" v-else style="font-size: 0;">
					<image style="width: 28rpx;height: 18rpx;" src="./static/22.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="flex justify-center"
			style="position: fixed;bottom: 0;width: 100%;padding-bottom: 20rpx;background: #fff;">
			<view class="" @click="invite"
				style="padding: 20rpx 314rpx;border-radius: 40rpx;background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);font-size: 28rpx;font-weight: 700;color: #FFFFFF;">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: '',
				name: '',
				iden: 0,
				job: '',
				shopName: '',
				management: true,
				shopId: 0,
				userList: '',
			}
		},
		onLoad(options) {
			let obj = JSON.parse(decodeURIComponent(options.obj));
			this.item = obj;
			this.name = this.item.shop_user_name;
			this.iden = this.item.now_iden==2?0:1;
			this.job = this.item.work;
			this.management = this.item.on_line==1?true:false;
			this.shopId = this.item.shopId;
			this.getShopUser();
		},
		methods: {
			invite() {
				if (this.name == '') {
					uni.showToast({
						title: '请输入员工姓名',
						icon: 'none'
					})
					return;
				}
				if (this.iden == 1 && this.job == '') {
					uni.showToast({
						title: '请录入职位',
						icon: 'none'
					})
					return;
				}
				
				let data = {
					keyword: this.keyWords,
					shop_id: this.shopId,
					user_id: this.item.id,
					iden: this.iden == 0 ? 2 : this.iden,
					on_line: this.iden == 0 ? 1 : this.management ? 1 : 0,
					id:this.item.use_id,
					shop_user_name:this.name
				}
				
				if(this.iden==1){
					data.work = this.job;
				}
				this.$request({
					url: 'shopuser/user_edit',
					method: 'POST',
					data: data,
				}).then(res => {
					if(res.data.code==1){
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					}else {
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}
				})
			},
			// 获取店铺信息
			getShopUser() {
				this.$request({
					url: 'Shopuser/user_list',
					method: 'POST',
					data: {
						keyword: '',
						shop_id: this.shopId
					},
				}).then(res => {
					this.userList = res.data.data;
				})
			},
			//选择身份
			changeIden(e) {
				this.iden = e;
			},
		}
	}
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-clum {
		flex-direction: column;
	}

	.align-center {
		align-items: center;
	}

	.align-end {
		align-items: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}
</style>
